/**
 * 看板拖动相关
 */
const MAX_COL_NUM = 36;
export default {
  data() {
    return {
      itemKindsHeights: { // 1:概览标签，2:表格，3:图表 4：翻页器，5，标题图模块, 6: 首页模块
        0: { min: 4, max: Infinity },
        1: { min: 6, max: Infinity },
        2: { min: 6, max: Infinity },
        3: { min: 6, max: Infinity },
        4: { min: 2, max: Infinity },
        5: { min: 2, max: Infinity },
        6: { min: 4, max: Infinity }
      },
      itemKindsWidths: {
        0: { min: 1, max: MAX_COL_NUM },
        1: { min: 2, max: MAX_COL_NUM },
        2: { min: 4, max: MAX_COL_NUM },
        3: { min: 4, max: MAX_COL_NUM },
        4: { min: 4, max: MAX_COL_NUM },
        5: { min: 1, max: MAX_COL_NUM },
        6: { min: 4, max: MAX_COL_NUM }
      },
      layoutList: [],
      cacheLayout: null,
      readyLayout: false,
      tagsForResize: {},

      gridItemCfg: {
        // i: 0, // 栅格中元素的ID，其他参数：
        // x: 0,
        // y: 0,
        // w: 1,
        // h: 1,
        minW: 1,
        maxW: Infinity,
        minH: 1,
        maxH: Infinity,
        isDraggable: null,
        isResizable: null,
        static: false,
        dragIgnoreFrom: 'a, button, .no-drag', // 标识栅格元素中哪些子元素无法触发拖拽事件
        dragAllowFrom: '.vue-draggable-handle', // 标识栅格元素中哪些子元素可以触发拖拽事件,如果值为null则表示所有子元素（dragIgnoreFrom的除外）。
        resizeIgnoreFrom: 'a, button' // 标识栅格元素中哪些子元素无法触发调整大小的事件
      }
    };
  },
  computed: {
    girdLayoutCfg() {
      let margin = [16, 16];
      let rowHeight = 4;
      if (this.chartConfig.moduleMargin || this.chartConfig.moduleMargin === 0) {
        const configMargin = this.chartConfig.moduleMargin;
        margin = [configMargin, configMargin];
        rowHeight = 20 - configMargin;
      }
      return {
        // layout: []// 数据源。值必须为 Array，其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem
        colNum: MAX_COL_NUM, // 定义栅格系统的列数，其值需为自然数
        rowHeight: rowHeight, // 每行的高度，单位像素；模块高度为：rows*(rowHeight+margin)-margin，因为只有这样才能实现大小模块间的对齐组合
        maxRows: Infinity, // 定义可拖动区域总高度限制，如果模块在这个高度外，高度将被压缩
        margin: margin, // 定义栅格中的元素边距: 水平, 垂直，单位为像素
        isDraggable: true, // 标识栅格中的元素是否可拖拽
        isResizable: true, // 标识栅格中的元素是否可调整大小
        isMirrored: false, // 标识栅格中的元素是否可镜像反转
        autoSize: true, // 标识容器是否自动调整大小
        verticalCompact: true, // 标识布局是否垂直压缩
        useCssTransforms: true, // 标识是否使用CSS属性 transition-property: transform;
        responsive: false, // 标识布局是否为响应式
        rightToLeft: true,
        preventCollision: false, // 元素碰撞
        breakpoints: { // 为responsive响应式布局设置断点
          // // lg: 1200,
          // lg: 1000,
          // // md: 996,
          // md: 833,
          // sm: 666,
          // xs: 500,
          // xxs: 0
          // lg: 1200,
          lg: 1150,
          // md: 996,
          md: 1050,
          sm: 950,
          xs: 850,
          xxs: 750
        },
        cols: { // responsive 设置每个断点对应的列数
          // lg: 12,
          // md: 10,
          // sm: 6,
          // xs: 4,
          // xxs: 2
          lg: 32,
          md: 28,
          sm: 24,
          xs: 20,
          xxs: 16
        }
      };
    }
  },
  methods: {
    layoutCreatedEvent(newLayout) { // 对应Vue生命周期的created
      // console.log('Created layout: ', newLayout);
    },
    layoutBeforeMountEvent(newLayout) { // 对应Vue生命周期的beforeMount
      // console.log('beforeMount layout: ', newLayout);
    },
    layoutMountedEvent(newLayout) { // 对应Vue生命周期的mounted
      // console.log('Mounted layout: ', newLayout);
    },
    layoutReadyEvent(newLayout) { // 当完成mount中的所有操作时生成的事件
      // console.log('Ready layout: ', newLayout);
      this.readyLayout = true;
    },
    layoutUpdatedEvent(newLayout) { // 更新事件（布局更新或栅格元素的位置重新计算）
      // console.log('Updated layout: ', newLayout);
      // if (this.$refs.gridLayout) this.$refs.gridLayout.layoutUpdate();
    },
    moveEvent(i, newX, newY) { // 移动时的事件
      // console.log('MOVE i=' + i + ', X=' + newX + ', Y=' + newY);
    },
    resizeEvent(i, newH, newW, newHPx, newWPx) { // 调整大小时的事件
      // console.log('RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx);
      // let w = newW;
      // switch (newW) { // 过滤和设置无效宽度
      //   case 5:
      //     w = 4;
      //     break;
      //   case 7:
      //     w = 6;
      //     break;
      //   case 10:
      //     w = 9;
      //     break;
      //   case 11:
      //     w = 12;
      //     break;
      //   default:
      //     break;
      // }
      // if (w !== newW) {
      //   const layoutItemIndex = this.layoÅutList.findIndex(item => item.i === i);
      //   this.$nextTick(() => {
      //     this.layoutList[layoutItemIndex].w = w;
      //   });
      // }
    },
    movedEvent(i, newX, newY) { // 移动后的事件
      // console.log('MOVED i=' + i + ', X=' + newX + ', Y=' + newY);
    },
    resizedEvent(i, newH, newW, newHPx, newWPx) { // 调整大小后的事件
      // console.log('RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx);
      this.tagsForResize[i] = !this.tagsForResize[i];
    },
    getTagForResize(i) {
      return !this.readyLayout || (this.readyLayout && this.tagsForResize[i]);
    },
    refreshResizeTag() {
      const tagsForResize = {};
      this.layoutList.forEach(item => {
        tagsForResize[item.i] = !this.tagsForResize[item.i];
      });
      setTimeout(() => {
        this.tagsForResize = tagsForResize;
      }, 550); // 不能少于500否则无效
    }
  }
};
